import uiHtml from './ui.html'// 引入GUI控制面板标签
import './ui.scss' // 引入GUI控制面板样式
import GlobalGroup from '@/utils/GlobalGroup';

// 创建GUI控制面板
let controlbody = document.createElement('div')
controlbody.className = 'GUIbody'
controlbody.innerHTML = uiHtml

// GUI控制面板交互
window.onload = ()=>{
    showCube.onclick = (e)=>{
        if(e.target.checked){
            GlobalGroup.children[0].visible = true
        }else{
            GlobalGroup.children[0].visible = false
        }
    }
    showSphere.onclick = (e)=>{
        if(e.target.checked){
            GlobalGroup.children[1].visible = true
        }else{
            GlobalGroup.children[1].visible = false
        }
    }
    showSpotlight.onclick = (e)=>{
        if(e.target.checked){
            GlobalGroup.children[2].visible = true
        }else{
            GlobalGroup.children[2].visible = false
        }
    }
    showArror.onclick = (e)=>{
        if(e.target.checked){
            GlobalGroup.children[3].visible = true
        }else{
            GlobalGroup.children[3].visible = false
        }
    }
}

export default {
    //GUI控制面板渲染函数
    renderControlBody(){
        let GUI = document.getElementsByTagName('body')[0];
        GUI.append(controlbody)
    }
}
    